<template>
    <view class="question-page">
      <view class="header">
        <uni-icon class="back-icon" type="back" size="24" @click="goBack"></uni-icon>
        <text class="title">Java 基础面试题</text>
        <uni-icon class="more-icon" type="more" size="24" @click="showMoreOptions"></uni-icon>
      </view>
      <view class="question-content">
        <text class="question-text">{{ item?.text || '加载中...' }}</text>
        <view class="tags">
          <text class="tag">Java基础</text>
          <text class="tag">Java</text>
        </view>
        <view class="answer-button">
          <button class="answer-btn" @click="showAnswer">点击查看答案</button>
        </view>
      </view>
      <view class="footer">
        <view class="question-status">
          <text class="status-text">Java 基础面试题 ({{ currentIndex + 1 }}/ {{ questionList.length }})</text>
        </view>
        <view class="button-container">
          <button class="prev-button" @click="goToPrevious">上一题</button>
          <button class="next-button" @click="goToNext">下一题</button>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  // 模拟获取问题列表
  const questionList = ref([
    { id: 1, text: '你认为 Java 的优势是什么？' },
    { id: 2, text: '什么是 Java 的多态特性？' },
    { id: 3, text: 'Java 中的参数传递是按值还是按引用？' },
    { id: 4, text: '接口和抽象类有什么区别？' },
    { id: 5, text: '为什么 Java 不支持多重继承？' },
    { id: 6, text: 'Java 中的序列化和反序列化是什么？' },
    { id: 7, text: '什么是 Java 中的不可变类？' },
    { id: 8, text: 'Java 中 Exception 和 Error 有什么区别？' },
    { id: 9, text: 'Java 面向对象编程与面向过程编程的区别是什么？' },
    { id: 10, text: 'Java 方法重载和方法重写之间的区别是什么？' },
    { id: 11, text: '什么是 Java 内部类？它有什么作用？' },
    { id: 12, text: 'JDK8 有哪些新特性？' }
  ]);
  
  // 当前问题索引
  const currentIndex = ref(0);
  
  // 初始化当前问题
  onMounted(() => {
    initQuestion();
  });
  
  // 初始化问题
  function initQuestion() {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.options;
  
    if (options && options.item) {
      try {
        item.value = JSON.parse(decodeURIComponent(options.item));
        currentIndex.value = findIndexById(item.value.id); // 找到当前问题在列表中的索引
      } catch (e) {
        console.error('Error parsing item:', e);
      }
    } else {
      item.value = questionList.value[currentIndex.value]; // 默认显示第一个问题
    }
  }
  
  // 查找问题 ID 对应的索引
  function findIndexById(id) {
    return questionList.value.findIndex(q => q.id === id);
  }
  
  // 点击返回按钮
  function goBack() {
    uni.navigateBack();
  }
  
  // 显示更多选项
  function showMoreOptions() {
    console.log('Show more options');
  }
  
  // 显示答案
  function showAnswer() {
    console.log(item.value.text);
  }
  
  // 跳转到上一题
  function goToPrevious() {
    if (currentIndex.value > 0) {
      currentIndex.value--;
      item.value = questionList.value[currentIndex.value];
    }
  }
  
  // 跳转到下一题
  function goToNext() {
    if (currentIndex.value < questionList.value.length - 1) {
      currentIndex.value++;
      item.value = questionList.value[currentIndex.value];
    }
  }
  
  // 当前问题对象
  const item = ref(questionList.value[currentIndex.value]);
  </script>
  
  <style scoped>
  /* 样式部分 */
  .question-page {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  
  .back-icon, .more-icon {
    margin: 0 10rpx;
  }
  
  .title {
    flex: 1;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .question-content {
    padding: 20rpx;
  }
  
  .question-text {
    font-size: 28rpx;
  }
  
  .tags {
    display: flex;
    margin-top: 20rpx;
  }
  
  .tag {
    background-color: #f0f0f0;
    padding: 5rpx 10rpx;
    margin-right: 10rpx;
    border-radius: 10rpx;
  }
  
  .answer-button {
    margin-top: 20rpx;
  }
  
  .answer-btn {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    background-color: #ffcc00;
    border-radius: 40rpx;
    color: #fff;
  }
  
  .footer {
    padding: 20rpx;
    display: flex;
    flex-direction: column; /* 保持垂直布局 */
    align-items: center;
    border-top: 1px solid #eee;
  }
  
  .status-text {
    font-size: 28rpx;
    margin-bottom: 10rpx; /* 添加一些间距 */
  }
  
  .button-container {
    display: flex;
    justify-content: space-between; /* 按钮水平排列 */
    width: 100%; /* 使按钮容器宽度为100% */
  }
  
  .prev-button, .next-button {
    width: 48%; /* 按钮各占一半宽度 */
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    background-color: #ffcc00;
    border-radius: 40rpx;
    color: #fff;
    margin-bottom: 10rpx; /* 添加一些间距 */
  }
  </style>